<template>
  <div class="year">
    <h2>第5届<i @click="folding"></i></h2>
    <span class="numbers">共23个人</span>
    <transition name="fade">
      <div ref="list" class="list" v-if="show">
        <!--管理员-->
        <div>
          <h3 :style="background.circle">管理员</h3>
          <div class="list-item admin">
            <ul>
              <router-link :to="{name: 'people', params: {userId: index}}" tag="li" class="weily-man" :key="index" v-for="(item, index) in allArr">
                <m-admin></m-admin>
              </router-link>
            </ul>
          </div>
        </div>
        <!--成员-->
        <div>
          <h3 :style="background.circle">成员</h3>
          <div class="list-item members">
            <ul>
              <router-link :to="{name: 'people', params: {userId: index}}" tag="li" class="weily-man" :key="index" v-for="(item, index) in allArr">
                <m-person></m-person>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import {Bgimg} from "../Bgimg";
  import  MAdmin from "../bases/MembersAdmin"
  import  MPerson from  "../bases/MembersPerson"
    export default {
      name: "yearMembers",
      data(){
        return {
          allArr: [],//所有数据
          background: {
            section: {
              backgroundImage: `url(${Bgimg.members.section})`
            },
            lightTop: {
              backgroundImage: `url(${Bgimg.members.lightTop})`
            },
            light: {
              backgroundImage: `url(${Bgimg.members.light})`
            },
            clock: {
              backgroundImage: `url(${Bgimg.members.clock})`
            },
            lineBg: {
              backgroundImage: `url(${Bgimg.members.lineBg})`
            },
            circle: {
              backgroundImage: `url(${Bgimg.members.circle})`
            }
          },
          show: false
        }
      },
      components: {
        MAdmin,
        MPerson
      },
      methods:{
        folding: function () {
          this.show =! this.show
        }
      },
      async mounted() {
        /* this.personArr.forEach(item => {
           this.arr.push(new MinPersonContructor(item))
         })*/
        let url = '/static/data/members.json'
        let data = await this.$axios.get(url)
        this.allArr = data.data
        console.log(data.data)
      }
    }
</script>

<style scoped lang="stylus">
  @import "../stylus/variable.styl"
  $text-color = #ec6a13
  .year
    color $text-color
    .numbers
      display inline-block
      padding-left 30px

    h2
      font-size 24px
      i
        position relative
        left 10px
        display inline-block
        border 8px solid rgba(0,0,0,0)
        border-left 10px solid $text-color
      i:hover
        cursor pointer
    h2, h3
      display inline-block
      box-sizing border-box
      width 285px
      padding-right 50px
      line-height 40px
      text-align right
      height 40px
    h3
      width 300px
      background no-repeat 272px 5px
  .list
    overflow hidden
  .list>div
    padding-top 10px
  .list-item
    width 650px
    padding 10px
    display inline-block
    vertical-align top
    margin-left 20px
  /*border 1px solid silver*/
  .admin
    li
      border 1px solid silver
      margin-right 10px
      width 200px
      height 250px
      border-radius 5px
      display inline-block
  .members
    li
      border-radius 5px
      border 1px solid silver
      width 610px
      height 120px
      margin-bottom 2px
  .weily-man
    vertical-align top
    cursor pointer
  .fade-enter-active, .fade-leave-active
    transition height .5s
  .fade-enter, .fade-leave-to
    height 0px
  .fade-enter-to, .fade-leave
    height 684px
</style>
